<template>
    <div id="container"></div>
</template>

<script>
    import AMap from 'AMap';
    export default {
        name: "Map",
        data(){
            return{
                infoWindow:null,
                infoWindowData:[],
                pipelineDataList:[
                    {
                        path:[new AMap.LngLat(118.87,28.93),new AMap.LngLat(119.649506,29.089524)],
                        data:'衢州站至金华站'
                    },
                    {
                        path:[new AMap.LngLat(119.649506,29.089524),new AMap.LngLat(120.23629,29.71358)],
                        data:'金华站至诸暨站'
                    },
                    {
                        path:[new AMap.LngLat(120.23629,29.71358),new AMap.LngLat(120.27,30.17)],
                        data:'诸暨站至萧山站'
                    }
                ]
            }
        },
        mounted(){
            this.map = new AMap.Map("container", {
                mapStyle:'amap://styles/167552a46d8f5e5da188e6fb04dd250b',
                resizeEnable: true,
                center: [119.649506,29.089524],
                zoom: 13,
                viewMode:'3D'
            });
            this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
            for (let i=0;i<this.pipelineDataList.length;i++){
                    let polyline=new AMap.Polyline({
                        path:this.pipelineDataList[i].path,
                        strokeWeight: 6,
                        strokeColor: '#3366FF',
                        isOutline: true,
                        borderWeight: 1,
                        outlineColor: '#ffeeff',
                        extData:{
                            data:this.pipelineDataList[i].data
                        }
                    });
                    polyline.setMap(this.map);
                    polyline.on('click',this.polylineClick);
            }
        },
        methods:{
            polylineClick(e){
                console.log(e);
                console.log(e.target.w.extData);
                let position=[];
                position.push(e.lnglat.lng);
                position.push(e.lnglat.lat);
                this.infoWindow = new AMap.InfoWindow({
                    content:'<div>id:'+e.target.w.extData.data+'</div><br/>'
                });
                this.infoWindow.open(this.map,position);
            },
            // transferCoordinates(start,end){
            //     let path=[];
            //     let path_start=[];
            //     let path_end=[];
            //     path_start.push(start.key);
            //     path_start.push(start.value);
            //
            //     path_end.push(end.key);
            //     path_end.push(end.value);
            //
            //     path.push(path_start);
            //     path.push(path_end);
            //     return path
            // }
        }
    }
</script>

<style scoped>
    #container{
        width: 500px;
        height: 500px;
        /*border-radius: 50%;*/
    }
</style>